<template>
	<view class="box" :class="type==22 ? 'typeIs22Bg':''">
		<view style="overflow: hidden;" class="tou fixed byq" :style="'padding-top:' + statusBarHeight1 + 'px;'" :class="type==2 ? 'typeIs2Bg':''">
			<view class="toptitle">
				<image class="back" src="https://pic.bangbangtongcheng.com/static/seting-fanhui.png" @click="back" />
				{{ text }}
			</view>
			<view class="secondaryFunction" :style="'padding-bottom:'+(statusBarHeight1)+'px;'" v-if="type == 2">
				<span class="active">更改手机号</span>
				<span @click="clause">注销账号</span>
			</view>
		</view>
		<view class="content">
			<view class="inputBox">
				<view v-if="type == 1">
					<input v-model="nikeName" class="input" placeholder="请输入少于15字符的新昵称"
						placeholder-class="input-placeholder" minlength="3" maxlength="15" />
					<view class="tips">
						<span class="tishi">i</span>
						好名字可以让帮友对你的印象更深刻
					</view>
				</view>

				<view class="login-box-new" style="margin-top: -55rpx;" v-if="type == 2">
					<view class="notice">
						<p style="margin-bottom: 30rpx;font-weight: 700;font-size: 32rpx;">敬告：</p>
						<p>
							{{changePhoneTipInfo}}
						</p>
					</view>
					<view class="inputGroup form-bg">
						<view class="tip">请确保为本人操作，并进行验证</view>
						<view class="input-box-new">
							<view style="font-size: 32rpx;">原 手 机 号：</view>
							<view class="originPhone">{{ maskedPhone }}</view>
						</view>
						<view class="input-box-new">
							<view style="font-size: 32rpx;">输入验证码：</view>
							<input v-model="Verifys" type="number"
								placeholder-class="input-placeholder" />
							<view class="getcode" @click="getcode">{{ content }}</view>
						</view>
					</view>
				</view>

				<view class="login-box-new" v-if="type == 22" style="margin-top: -75rpx;background: transparent;">
					<view class="inputGroup" style="background-color: transparent;">
						<view class="input-box-new">
							<view style="font-size: 32rpx;">新手机号：</view>
							<input style="padding-bottom: 28rpx;" v-model="phone1"
								placeholder="请输入新手机号" placeholder-class="input-placeholder" />
							<!-- <view class="originPhone">186***8686</view> -->
						</view>
						<view class="input-box-new">
							<view style="font-size: 32rpx;">验 证 码 ：</view>
							<input style="padding-bottom: 28rpx;" v-model="Verifys" type="number" placeholder="请输入验证码"
								placeholder-class="input-placeholder" />
							<view class="getcode" @click="getcode">{{ content22 }}</view>
						</view>
					</view>
				</view>

				<!-- <view class="login-box" v-if="type == 2">
					<view class="input-box">
						<input v-model="phone1" placeholder="请输入新手机号" placeholder-class="input-placeholder" />
					</view>
					<view class="input-box">
						<input v-model="Verifys" type="number" placeholder="请输入验证码"
							placeholder-class="input-placeholder" />
						<view class="getcode" @click="getcode">{{ content }}</view>
					</view>
				</view> -->
				<view class="login-box" v-if="type == 3">
					<view class="input-box">
						<input v-model="phone" placeholder="请输入手机号" placeholder-class="input-placeholder" disabled />
					</view>
					<view class="input-box">
						<input v-model="Verifys" type="number" placeholder="请输入验证码"
							placeholder-class="input-placeholder" />
						<view class="getcode" @click="getcode">{{ content }}</view>
					</view>
					<view class="input-box">
						<input v-model="password" placeholder="请输入密码（最少6位）" placeholder-class="input-placeholder"
							password="true" />
					</view>
				</view>
			</view>
			<view class="button" v-if="type == 1 || type == 3" @click="updetaUser">保存</view>
			<!-- <view class="button" v-if="type == 2 && step == 1" @click="nextStep">下一步</view> -->
			<view class="button" v-if="type == 2" @click="nextStepNew">下一步</view>
			<view class="button" v-if="type == 22" @click="updetaUser">保存</view>
		</view>
		<view class="motaikuang" v-show="show" @click="show = false">
			<div class="verify" @click.stop="aaa">
				<verify :show="show" @Handle="Handle"></verify>
			</div>
		</view>
		<view class="motaikuang" v-show="show22" @click="show22 = false">
			<div class="verify" @click.stop="aaa">
				<verify :show="show22" @Handle="Handle22"></verify>
			</div>
		</view>
		<uniBall></uniBall>
	</view>
</template>

<script>
	//#ifdef H5
	import wxshare from "../utils/index.js";
	//#endif
	import {
		mapGetters
	} from "vuex";
	import Verify from "@/components/VueImageVerify.vue";
	export default {
		data() {
			return {
				changePhoneTipInfo:'',
				imgUrl: this.$imgSrc,
				userInfo: uni.getStorageSync("Pduser"),
				phone: "",
				type: "",
				text: "",
				code: "",
				nikeName: "",
				content: "获取验证码",
				content22: "获取验证码",
				phone1: "", //新手机号
				Verifys: "",
				Verifys22: "",
				show: false,
				show22: false,
				show1: false,
				canClick: true,
				canClick22: true,
				totalTime: 60,
				totalTime22: 60,
				password: "",
				reg_tel: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-9])\d{8}$/,
				reg_tel1: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/,
				step: 1,
				anti_shake: false,
			};
		},
		computed: {
			...mapGetters(["statusBarHeight1", "userinfo"]),
			maskedPhone() {
				return this.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
			}
		},
		onLoad(options) {
			console.log("statusBarHeight1",this.statusBarHeight1);
			this.type = options.type;
			if (this.type == 1) {
				this.text = "昵称设置";
				this.nikeName = this.userInfo.nikeName
			} else if (this.type == 2) {
				this.text = "账号设置";
				
				this.$myRequest
					.get("/api/mobile/public/getChangePhoneTipInfo")
					.then((res) => {
						this.changePhoneTipInfo = res.data.content
					})
			} else if (this.type == 3) {
				this.text = "密码设置";
			} else if (this.type == 22) {
				this.text = "更改手机号";
			}
			this.phone = this.userInfo.phone;
			/* #ifdef H5 */
			this.jinzhi();
			/* #endif */
		},
		components: {
			verify: Verify
		},
		methods: {
			// 跳转账号注销
			clause() {
				const userInfo = uni.getStorageSync("Pduser");
				if (userInfo.merchantId) {
					// uni.showToast({
					//   title: '当前账户为车会员商家，不可注销！',
					//   icon: 'none'
					// });

					let data = {
						id: userInfo.id,
					};
					this.$myRequest
						.post("/mob/user/cancellation", data)
						.then((res) => {
							this.html = res.msg;
							this.$refs.binds22.open();
						})
						.catch((err) => {
							uni.hideToast();
							this.html = err.msg;
							this.$refs.binds22.open();
							return;
						});
					return false;
				}
				uni.navigateTo({
					url: "/pages_my/cancellation",
				});
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			aaa() {},
			jinzhi() {
				let _this = this;
				let param = window.location.href.split("#")[0];
				uni.request({
					method: "post",
					data: {
						url: param
					},
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},
					url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
					success(re) {
						_this.jinzhifx(re.data);
					}
				});
			},
			jinzhifx(data) {
				wxshare.config({
					debug: false, //是否打开调试
					appId: data.appId, // 公众号的唯一标识
					timestamp: data.timestamp, // 生成签名的时间戳
					nonceStr: data.nonce, // ，生成签名的随机串
					signature: data.signature, // 签名
					jsApiList: ["hideMenuItems"]
				});
				// 禁止分享
				wxshare.hideMenuItems({
					// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
					menuList: [
						"menuItem:share:appMessage",
						"menuItem:share:timeline",
						"menuItem:share:timeline",
						"menuItem:share:qq",
						"menuItem:favorite",
						"menuItem:share:QZone",
						"menuItem:openWithSafari"
					]
				});
			},
			Handle(success) {
				console.log(this.phone);
				if (!this.canClick) return; //改动的是这两行代码
				this.canClick = false;
				this.show = false;
				this.content = this.totalTime + "s后重新发送";
				this.$myRequest
					.get("/mob/login/phoneVerification.do", {
						phone: this.type == 22 ? this.phone1 : this.phone,
						type: 1
					})
					.then(res => {
						console.log(res);
						uni.showToast({
							title: '发送验证码成功',
							icon: "none",
							mask: true
						});
						this.code = res.CODE;
					});
				let clock = setInterval(() => {
					this.totalTime--;
					this.content = this.totalTime + "s后重新发送";
					if (this.totalTime < 0) {
						clearInterval(clock);
						this.content = "重新发送验证码";
						this.totalTime = 60;
						this.canClick = true; //这里重新开启
					}
				}, 1000);
			},
			Handle22(success) {
				console.log(this.phone);
				if (!this.canClick22) return; //改动的是这两行代码
				this.canClick22 = false;
				this.show22 = false;
				this.content22 = this.totalTime22 + "s后重新发送";
				this.$myRequest
					.get("/mob/login/phoneVerification.do", {
						phone: this.type == 22 ? this.phone1 : this.phone,
						type: 1
					})
					.then(res => {
						console.log(res);
						uni.showToast({
							title: '发送验证码成功',
							icon: "none",
							mask: true
						});
						this.code = res.CODE;
					});
				let clock = setInterval(() => {
					this.totalTime22--;
					this.content22 = this.totalTime22 + "s后重新发送";
					if (this.totalTime22 < 0) {
						clearInterval(clock);
						this.content22 = "重新发送验证码";
						this.totalTime22 = 60;
						this.canClick22 = true; //这里重新开启
					}
				}, 1000);
			},
			nextStepNew() {
				if(this.type==2){
					if(this.code===""){
						uni.showToast({
							title: "验证码不可为空",
							icon: "none",
							mask: true
						});
						return;
					}
					if (this.Verifys != this.code) {
						uni.showToast({
							title: "验证码不正确，请重新填写",
							icon: "none",
							mask: true
						});
						return;
					}
					
					this.Verifys = '';
					this.type = 22;
					this.text = "更改手机号"
				}
			},
			nextStep() {
				if (this.Verifys != this.code) {
					uni.showToast({
						title: "验证码不正确，请重新填写",
						icon: "none",
						mask: true
					});
					return;
				}
				this.totalTime = 0;
				this.content = "重新发送验证码";
				this.Verifys = "";
				this.code = "";
				// this.step = 2;
			},
			getcode() {
				// if (this.step == 1) {
				//   this.phone = this.phone.trim();
				//   if (!this.reg_tel.test(this.phone)) {
				//     uni.showToast({
				//       title: "请填写正确的手机号码",
				//       icon: "none",
				//       mask: true
				//     });
				//     return;
				//   }
				//   this.show = true;
				// } else if (this.step == 2) {
				var currentPhone = "";
				if (this.type == 22) {
					currentPhone = this.phone1.trim()
				} else {
					currentPhone = this.phone.trim()
				}
				if (!this.reg_tel.test(currentPhone)) {
					uni.showToast({
						title: "请填写正确的手机号码",
						icon: "none",
						mask: true
					});
					return;
				}
				if (this.type == 22) {
					if (this.canClick22) {
						this.show22 = true;
					}
				} else {
					if (this.canClick) {
						this.show = true;
					}
				}
				
				// }
			},
			updetaUser() {
				console.log("@@@")
				let _this = this;
				if (this.anti_shake) {
					return false
				}
				let data = {
					id: _this.userInfo.id
				};
				var uPattern = /^[A-Za-z0-9_\u4e00-\u9fa5]{2,15}$/;

				var status = true;
				if (this.type == 1) {
					if (!uPattern.test(this.nikeName)) {
						uni.showToast({
							title: "请输入正确的用户名",
							icon: "none"
						});
						//xhr.status:获取当前服务器的响应状态  200=>成功
						status = false;
						return;
					} else {
						data.nikeName = _this.nikeName;
					}
				} else if (this.type == 2 || this.type == 22) {
					if (!this.reg_tel.test(this.phone1)) {
						uni.showToast({
							title: "请填写正确的手机号码",
							icon: "none",
							mask: true
						});
						status = false;
						return;
					}
					if (this.Verifys != this.code) {
						uni.showToast({
							title: "验证码不正确，请重新填写",
							icon: "none",
							mask: true
						});
						status = false;
						return;
					}
					data.phoneCode = _this.Verifys
					data.phone = _this.phone1;
				} else if (this.type == 3) {
					if (!this.reg_tel.test(this.phone)) {
						uni.showToast({
							title: "请填写正确的手机号码",
							icon: "none",
							mask: true
						});
						status = false;
						return;
					}
					if (this.Verifys != this.code) {
						uni.showToast({
							title: "验证码不正确，请重新填写",
							icon: "none",
							mask: true
						});
						status = false;
						return;
					}
					if (this.password.length < 6) {
						uni.showToast({
							title: "密码格式不正确",
							icon: "none",
							mask: true
						});
						status = false;
						return;
					}
					data.password = _this.password;
				}
				if (status) {
					this.anti_shake = true
					_this.$myRequest.post("/mob/user/updateUserInfo", data).then(res => {
						if(!res.success){
							var error = "操作失败";
							if(this.type==22){
								error = '该手机号已绑定其他账号，请更换其他手机号';
							}
							uni.showToast({
								title: error,
								icon: "none",
								mask: true
							});
						}
						// 修改密码直接退出登录
						if(this.type==3){
							let that = this;
							uni.removeStorageSync("Pduser");
							uni.removeStorageSync("userInfo");
							uni.removeStorageSync("sessionKey");
							//that.$store.dispatch("user/logout", {});
							// uni.navigateBack();
							uni.showToast({
								title: '修改成功',
								icon: "none",
								mask: true
							});
							setTimeout(() => {
								uni.reLaunch({
									url: "/pages/my/index",
								});
							}, 1000);
						}else{
							console.log('updateUserInfo',res)
							var curPhone = this.userInfo.phone;
							if(this.type==22){
								curPhone = res.userInfo.phone;
							}
							this.$myRequest
								.get("/mob/login/getUserInfoByPhone", {
									phone: curPhone
								})
								.then(res => {
									if(res.success){
										this.userInfo = res.userInfo;
										uni.setStorageSync("Pduser", res.userInfo);
										console.log('res.userInfo',res.userInfo)
										uni.showToast({
											title: '操作成功',
											icon: "none",
											mask: true
										});
										setTimeout(() => {
											this.anti_shake = false
											uni.navigateBack();
										}, 1500);
									}else{
										uni.showToast({
											title: '操作失败',
											icon: "none",
											mask: true
										});
									}
								});
							// this.addIntegral(2)
						}
					});
				}
			},

			// 增加帮帮豆
			addIntegral(val) {
				this.$myRequest
					.post("/mob/iteration/addIntegral", {
						userId: this.userinfo.id,
						ruleNumber: val
					})
					.then(res => {});
			},
		}
	};
</script>

<style scoped lang='less'>
	page {
		background: #F5F7F9;
	}
	
	.typeIs22Bg {
		background-image: url(https://pic.bangbangtongcheng.com/static/bbcz/accountManager.png)  !important;
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
	}
	
	.typeIs2Bg {
		background-image: url('https://pic.bangbangtongcheng.com/static/bangyouquan-top-bg.png');
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
	}

	.byq {
		
		//height: 236rpx;

		.toptitle {
			font-size: 32rpx;
			color: black;
			line-height: 88rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 40rpx;
				margin-bottom: -3rpx;
			}
		}

		.secondaryFunction {
			margin-left: 40rpx;
			font-size: 24rpx;
			color: #666666;

			.active {
				font-size: 32rpx;
				color: #0FA291;
				font-weight: 600;
			}

			span {
				margin-right: 30rpx;
			}
		}
	}

	.box {
		background: #F5F7F9;

		.back {
			width: 32rpx;
			height: 32rpx;
			left: 32rpx;
		}
	}

	.content {
		/* #ifdef MP */
		height: calc(100vh - 192rpx);
		/* #endif */
		/* #ifdef APP-PLUS || H5 */
		height: calc(100vh - var(--status-bar-height) - 88rpx);

		/* #endif */
		.input {
			width: 690rpx;
			padding: 0 24rpx;
			margin: 0 auto;
			height: 90rpx;
			border: 1rpx solid #e0e0e0;
			font-size: 30rpx;

			input {
				width: 100%;
				height: 100%;
			}
		}
	}

	.inputBox {
		height: 492rpx;
		padding-top: 30rpx;

		.tips {
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			display: flex;
			align-items: center;
			margin: 0 30rpx;
			margin-top: 20rpx;

			.tishi {
				width: 26rpx;
				height: 26rpx;
				border-radius: 26rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				background: #C4C4C4;
				margin-right: 10rpx;
				transform: rotate(180deg);
			}
		}
	}

	.button {
		position: fixed;
		left: 40rpx;
		bottom: 80rpx;
		width: 670rpx;
		height: 90rpx;
		background: #0FA291;
		border-radius: 45rpx;
		margin: 0 auto;
		color: #fff;
		font-size: 34rpx;
		line-height: 90rpx;
		text-align: center;
	}

	.userHeader {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.input-placeholder {
		color: #999999;
	}

	.form-bg {
		background-image: url(https://pic.bangbangtongcheng.com/static/edit-account-form-bg.png) !important;
		background-size: 169rpx 153rpx !important;
		background-position: 95% 0% !important;
		background-repeat: no-repeat !important;
	}

	.login-box-new {
		padding: 20rpx !important;

		.notice {
			width: 710rpx;
			background: white;
			padding: 32rpx 20rpx;
			border-radius: 20rpx;
			font-size: 28rpx;
			color: #333333;
			line-height: 42rpx;
		}

		.inputGroup {
			width: 710rpx;
			//height: 364rpx;
			background: white;
			border-radius: 20rpx;
			margin-top: 20rpx;
			padding: 30rpx 20rpx;

			.tip {
				font-size: 32rpx;
				color: #000000;
				font-weight: 500;
				margin-bottom: 50rpx;
			}

			.input-box-new {
				display: flex;
				justify-content: start;
				margin-bottom: 50rpx;

				input,
				.originPhone {
					padding-top: 6rpx;
					height: auto !important;
					border-bottom: 1rpx solid #EBEBED;
					padding-bottom: 30rpx;
					width: 475rpx;
				}

				position: relative;

				.getcode {
					position: absolute;
					right: 0rpx;
					bottom: 23rpx;
					width: 200rpx;
					height: 60rpx;
					background: #0FA291;
					border-radius: 32rpx;
					text-align: center;
					line-height: 60rpx;
					color: white;
				}
			}
		}
	}

	.login-box {
		padding: 90rpx 100rpx 0;

		.box-title {
			line-height: 75rpx;
			font-size: 46rpx;
			margin-bottom: 105rpx;
			color: #64b6a8;
			font-weight: 600;
		}

		.input-box {
			height: 65rpx;
			border-bottom: 1rpx solid #d0d0d0;
			position: relative;
			margin-bottom: 52rpx;

			input {
				width: 100%;
				height: 64rpx;
				line-height: 64rpx;
				color: #333;
				font-size: 28rpx;
			}

			.area {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				color: #333;
				left: 0;
			}

			.line {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				color: #333;
				left: 60rpx;
				height: 30rpx;
				width: 2rpx;
				background: #333;
			}

			.getcode {
				position: absolute;
				top: 50%;
				right: 0;
				transform: translateY(-50%);
				color: #64b6a8;
				font-size: 28rpx;
				z-index: 10;
			}
		}

		.agreement {
			display: flex;
			padding-left: 10rpx;
			padding-top: 50rpx;
			font-size: 26rpx;
			align-items: center;

			.checkbox-group {
				width: 32rpx !important;
				height: 40rpx !important;
			}

			.text {
				display: flex;
				align-items: center;
				line-height: 37rpx;
				margin-left: 10rpx;
			}

			.tags {
				color: #64b6a8;
			}
		}

		.login {
			width: 100%;
			height: 76rpx;
			line-height: 76rpx;
			background: #64b6a8;
			color: #fff;
			border-radius: 100rpx;
			margin-top: 38rpx;
			margin-bottom: 24rpx;
		}

		.flex-end {
			display: flex;
			justify-content: space-between;
			align-items: center;

			view {
				font-size: 26rpx;
				line-height: 37rpx;
				color: #666666;
			}
		}
	}

	.motaikuang {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
		z-index: 20;

		.verify {
			position: fixed;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}
</style>